<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header {
            width: 300px;
            height: 35px;
            border-bottom: 1px solid black;
            line-height: 35px;
        }

        button {
            margin: 1px;
            padding: 0 4px;
        }

        /* .item {} */
    </style>
</head>

<body>
    <div class="header">
        <button onclick="get_all" class="all">全选</button><button onclick="reset_all"
            class="un">取消已选</button><button>反选</button><button>添加</button>
    </div>
    <div class="item">
        <p><input type="checkbox" name="change" id="a1" class="change">
            <label for="a1">铁血丹心</label>
        </p>
        <p><input type="checkbox" name="change" id="a2" class="change">
            <label for="a2">我</label>
        </p>
        <p><input type="checkbox" name="change" id="a3" class="change">
            <label for="a3">们</label>
        </p>
        <p><input type="checkbox" name="change" id="a4" class="change">
            <label for="a4">不</label>
        </p>
        <p><input type="checkbox" name="change" id="a5" class="change">
            <label for="a5">一</label>
        </p>
        <p><input type="checkbox" name="change" id="a6" class="change">
            <label for="a6">样</label>
        </p>
        <p><input type="checkbox" name="change" id="a7" class="change">
            <label for="a7">666</label>
        </p>
    </div>

    <script>
        let btns = document.querySelectorAll("button")
        let ipts = document.querySelectorAll(".change")


        console.log(btns[0]);
        btns[0].addEventListener('click',get_all)
        btns[1].addEventListener('click',reset_all)
        btns[2].addEventListener('click',unselect)


        function get_all() {
            for (let j = 0; j < ipts.length; j++) {
                let ipt = ipts[j];
                ipt.checked = true
            }
        }
        function reset_all() {
            for (let j = 0; j < ipts.length; j++) {
                let ipt = ipts[j];
                ipt.checked = false
            }
        }
        function unselect() {
            for (let i = 0; i < ipts.length; i++) {
                // const element = array[i];
                if (ipts[i].checked) {
                    ipts[i].checked = false
                }else{
                    ipts[i].checked = true
                }
            }
        }

        // btns[0].addEventListener('click', get_all())
        // btns[1].addEventListener('click', reset_all())




    </script>
    <!-- <script>
        let all = document.querySelector(".all")
        let un = document.querySelector(".un")
        let unsel = document.querySelector(".unselect")

        all.onclick = function () {
            let checkboxs = document.querySelectorAll('input[type="checkbox"]');
            checkboxs.forEach(checkbox => {
                checkbox.checked = true;
            });
        }
        un.onclick = function () {
            let checkboxs = document.querySelectorAll('input[type="checkbox"]');
            checkboxs.forEach(checkbox => {
                if(checkbox.checked = true){
                    checkbox.checked = false;
                }            
            });
        }
        unsel.onclick = function () {
            let checkboxs = document.querySelectorAll('input[type="checkbox"]');
            checkboxs.forEach(checkbox => {
                if(checkbox.checked = true){
                    checkbox.checked = false;
                }else if(checkbox.checked = false){
                     checkbox.checked = true;
                }            
            });
        }


    </script> -->
</body>

</html>